<template>
	<view class="content" :style="{background:$store.state.bgPrimaryColor}">
		<text class="title" v-if="lists.length > 0">{{title || ''}}</text>
		<text class="text_content">{{describe !== null && describe !== 'null' ? describe : ''}}</text>
		<view class="_back">
			<view class="Flex" v-for="(item,index) in lists" :key="index">
				<view class="left">
					<view class="quan" :style="{border:`6rpx solid ${$store.state.primaryColor}`}"></view>
					<!-- <u--image :showLoading="true" src="../../static/Home/yuanquan.png" width="30rpx" height="30rpx"
						radius="0"></u--image> -->
					<view class="solid" v-if="index+1 !== lists.length"
						:style="{backgroundColor:$store.state.primaryColor,border:`2rpx solid ${$store.state.primaryColor}`}">
					</view>
				</view>
				<view class="listFlex">
					<view class="listLeft">
						<view :style="{backgroundColor:$store.state.primaryColor}">1</view>
						<text>{{item.title || ''}}</text>
					</view>
					<u--image :showLoading="true" src="../../static/download.png" width="30rpx" height="30rpx" radius="0"
						@click="download(item.type_id,item.id)"></u--image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getList,
		getDown
	} from '../../api/Mine.js';
	export default {
		data() {
			return {
				lists: [],
				title:'',
				describe:''
			}
		},
		onLoad(option) {
			this.title = option.title;
			if(option.hasOwnProperty('describe'))this.describe = option.describe || '';
			this.getList(option.type_id,option.textbook_list_id);
		},
		methods: {
			/**
			@method 下载
			**/
			async download(type_id = null, id = null) {
				try {
					uni.showToast({
					    title: '开始下载',
					    icon: 'none',
					    duration: 2000
					});
					
					const res = await getDown({
						type_id: type_id,
						id: id
					});
					// window.open(res.data[0]);
					// const Url = res.data[0];
					// const a = document.createElement("a");
					// a.href = Url;
					// a.download = "download";
					// a.click();
					// 生成一个 Blob 对象
					  const pdfBlob = new Blob(["PDF content"], { type: "application/pdf" });
					
					  // 创建一个 URL 对象指向 Blob 数据
					  const url = URL.createObjectURL(pdfBlob);
					
					  // 创建一个 a 标签并设置下载属性和链接
					  const link = document.createElement("a");
					  link.href = res.data[0];
					  link.download = "sample.pdf";
					  document.body.appendChild(link);
					
					  // 模拟用户点击下载链接
					  link.click();
					
					  // 释放 URL 对象
					  URL.revokeObjectURL(url);
					  document.body.removeChild(link);
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			},
			/** 
			@method 教材类型
			**/
			async getList(type_id = null,textbook_list_id = null) {
				try {
					const res = await getList({
						type_id: type_id,
						textbook_list_id: textbook_list_id
					});
					this.lists = [...res.data];
				} catch (err) {
					//TODO handle the exception
					console.log(err);
				}
			}
		}
	}
</script>

<style>
	page {
		width: 100%;
		height: 100vh;
		/* background-image: url('../../static/yuyuebeij.png');
		background-repeat: no-repeat; */
	}
</style>
<style scoped lang="scss">
	.content {
		width: 100%;

		.title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 600;
			font-size: 40rpx;
			color: #333333;
			display: block;
			margin-bottom: 35rpx;
			margin-left: 50rpx;
			margin-top: 100rpx;
		}

		.text_content {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #666666;
			margin-left: 50rpx;
			margin-bottom: 50rpx;
			letter-spacing: 2rpx;
		}

		._back {
			width: auto;
			height: 100vh;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			background-color: #fbfbfc;
			margin-top: 70rpx;
			padding: 50rpx 30rpx 30rpx 30rpx;

			.Flex {
				display: flex;

				// align-items: center;
				.left {
					/deep/ .u-image {
						margin-top: 40rpx;
					}
				}
				
				.quan{
					width:24rpx;
					height:24rpx;
					border-radius:50%;
					margin-top:40rpx;
					// border:6rpx solid red;
				}
				
				.solid {
					width: 2rpx;
					height: 78rpx;
					background-color: rgba(2, 156, 254, 0.61);
					border: 2rpx solid rgba(2, 156, 254, 0.61);
					display: block;
					margin: 0px auto;
					margin-top: 20rpx;
				}

				.listFlex {
					width: 80%;
					height: 55rpx;
					background-color: #fff;
					padding: 20rpx 20rpx 20rpx 20rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-radius: 20rpx;
					margin-left: 30rpx;
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

					/* 添加阴影效果 */
					.listLeft {
						display: flex;
						align-items: center;

						view {
							width: 45rpx;
							height: 45rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							border-radius: 50%;
							background-color: #2282fe;
							color: #fff;
						}

						text {
							margin-left: 15rpx;
							font-weight: 500;
							color: #333;
						}
					}
				}

			}

		}
	}
</style>